<template>
    <div class="listMain w1190 margin paddingBottom30">
        <!--list start-->
        <div class="listBox" v-for="productList in productLists">
            <router-link :to="`detail/${productList.id}`">
                <div class="listBoxName clearFix">
                    <p v-text="productList.name"></p>
                    <ul class="clearFix">
                        <li v-for="coupon in productList.canUseCoupon" v-text="coupon"></li>
                    </ul>
                </div>
                <div class="listBoxCont clearFix">
                    <div class="listBoxIncome fl listBoxLine">
                        <span><font v-text="productList.baseIncome"></font>%+{{ productList.extraIncome }}%</span>
                        <p>预期年化收益</p>
                    </div>
                    <div class="listBoxTerm fl listBoxLine">
                        <span><font v-text="productList.term"></font>天</span>
                        <p>项目期限</p>
                    </div>
                    <div class="listBoxInvestPercent fl">
                        <div>
                            <span :style="{ width: productList.investPercent }">
                                <i v-text="productList.investPercent"></i>
                            </span>
                        </div>
                        <p>剩余可投：{{ productList.leftInvest }}元</p>
                    </div>
                    <div class="listBoxInvest fr">
                        <span v-if="productList.isSale === 0" class="grayBg">已售罄</span>
                        <span v-if="productList.isSale === 1" class="orangeBg">立即投资</span>
                        <CountDownTime v-if="productList.isSale === 2" :endTime="productList.endTime" :startTime="nowTime" :endText="btnText"></CountDownTime>
                    </div>
                </div>
                <div class="listBoxActive">
                    <i v-if="productList.activity === 0" class="noActive"></i>
                    <i v-if="productList.activity === 1" class="newer"></i>
                    <i v-if="productList.activity === 2" class="preSale"></i>
                </div>
            </router-link>
        </div>
        <!--list end-->
    </div>
</template>

<script>
    import CountDownTime from '../common/CountTime.vue'
    export default {
        data(){
            return {
                productLists: [
                    {
                        id: '1',
                        name: '垫贷宝NO. 12345',
                        canUseCoupon: ['加息券', '抵','aaaaaaaaaaa'],
                        baseIncome: '12.80',
                        extraIncome: '1.30',
                        term: '30',
                        investPercent: '85%',
                        leftInvest: '289790.00',
                        activity: 0, //0：无活动，1：新手标，2：活动标，3：预售标
                        isSale: 0 //0：已售罄，1：是，2：预售
                    },
                    {
                        id: '2',
                        name: '垫贷宝NO. 12345',
                        canUseCoupon: ['加息券'],
                        baseIncome: '12.80',
                        extraIncome: '1.30',
                        term: '30',
                        investPercent: '0%',
                        leftInvest: '289790.00',
                        activity: 1,
                        isSale: 1
                    },
                    {
                        id: '3',
                        name: '垫贷宝NO. 12345',
                        canUseCoupon: [],
                        baseIncome: '12.80',
                        extraIncome: '1.30',
                        term: '30',
                        investPercent: '22%',
                        leftInvest: '289790.00',
                        activity: 2,
                        isSale: 2,
                        endTime: '2018/01/31 00:00:00'
                    },
                    {
                        id: '4',
                        name: '垫贷宝NO. 12345',
                        canUseCoupon: ['加息券'],
                        baseIncome: '12.80',
                        extraIncome: '1.30',
                        term: '30',
                        investPercent: '100%',
                        leftInvest: '289790.00',
                        activity: 3,
                        isSale: 0
                    }
                ],
                nowTime: new Date(),
                btnText: '立即投资'
            }
        },
        components:{
            CountDownTime
        }
    }
</script>

<style lang="scss" scoped>
    .listBox{
        background: #fff;
        padding: 30px 40px;
        position: relative;
        margin: 22px 0;
        border-radius: 5px;
        box-shadow: 0 0 5px rgba(0,0,0,0.1);
        a{
            display: block;
            width: 100%;
        }
        .listBoxName{
            p{
                float: left;
                color: #333;
                font-size: 18px;
                margin-right: 20px;
            }
            ul{
                float: left;
                li{
                    float: left;
                    border: 1px solid #25a9fc;
                    color: #25a9fc;
                    border-radius: 26px;
                    height: 26px;
                    line-height: 26px;
                    margin-right: 10px;
                    padding: 0 10px;
                }
            }
        }
        .listBoxCont{
            margin-top: 20px;
            color: #666;
            font-size: 16px;
            .listBoxLine{
                position: relative;
                span{
                    display: block;
                    font-size: 16px;
                    height: 45px;
                    margin-bottom: 10px;
                    font{
                        font-size: 32px;
                    }
                }
            }
            .listBoxIncome{
                width: 292px;
                span{
                    color: #e95412;
                }
            }
            .listBoxTerm{
                width: 262px;
                span{
                    color: #333;
                }
            }
            .listBoxInvestPercent{
                padding-top: 40px;
                div{
                    width: 270px;
                    display: block;
                    height: 6px;
                    position: relative;
                    border-radius: 6px;
                    margin-bottom: 10px;
                    background: #eeeeee;
                    span{
                        display: block;
                        width: 100%;
                        height: 100%;
                        border-radius: 6px;
                        position: relative;
                        background: linear-gradient(90deg,#ff6235, #ffbf35);
                    }
                    i{
                        font-style: normal;
                        background: #ff6235;
                        display: block;
                        width: 40px;
                        text-align: center;
                        color: #fff;
                        padding: 5px 6px;
                        border-radius: 5px;
                        position: absolute;
                        right: -20px;
                        top: -35px;
                        font-size: 12px;
                    }
                    i:after{
                        content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -6px;
                        width: 0; height: 0;
                        border-left: 6px solid transparent;
                        border-right: 6px solid transparent;
                        border-top: 8px solid #ff6235;
                    }
                }
            }
            .listBoxInvest{
                width: 150px;
                padding-top: 20px;
                span{
                    height: 44px;
                    border-radius: 44px;
                    line-height: 44px;
                    color: #fff;
                    text-align: center;
                    font-size: 18px;
                    display: block;
                    width: 100%;
                    box-shadow: 0 5px 8px rgba(0,0,0,0.1);
                }
            }
        }
        .listBoxActive{
            position: absolute;
            right: 0;
            top: 0;
            width: 74px;
            height: 74px;
            i{
                display: block;
                width: 100%;
                height: 100%;
            }
            i.noActive{ background: url(../../assets/images/product-triangle.png) no-repeat 0 0;}
            i.newer{ background: url(../../assets/images/product-triangle.png) no-repeat -74px 0;}
            i.preSale{ background: url(../../assets/images/product-triangle.png) no-repeat -148px 0;}
        }
    }
    .listBox:hover{
        box-shadow: 0 0 20px rgba(0,0,0,0.1);
    }
</style>